<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active=active
    text-color="#fff" unique-opened router>
    <el-menu-item index="/home">

      <el-icon>
        <HomeFilled />
      </el-icon>
      <span>首页</span>
    </el-menu-item>


    <el-sub-menu v-for="item in store.getters.getUser.menus" :key="item.id" :index="item.id.toString()">
      <template #title>
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item v-for="menu in item.children" :key="menu.id" :index="menu.url">{{menu.title}}</el-menu-item>
    </el-sub-menu>


  </el-menu>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
let store = useStore()
const router = useRouter()
import { onMounted, ref } from "vue"
let active: string = router.currentRoute.value.path
onMounted(() => {

  console.log();
  
})



</script>

<style scoped lang="less">
.el-menu {
  height: 887px;
}
</style>